<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			function delerow(x) {
				var col = x.parentNode; //x的父节点是单元格
				var row = col.parentNode; //col的父节点是行
				var table = row.parentNode; //row的父节点是表格
				if(table) {
					table.removeChild(row); //删除表的子节点行
				}
			}

			function addrow() {
//				var len=tab.length;
				var newrow = document.getElementById("tab").insertRow(tab.rows.length);
//				alert(tab.length);
				var cols1 = newrow.insertCell(0);
				cols1.appendChild(document.createElement("input"));
				var cols2 = newrow.insertCell(1);
				cols2.appendChild(document.createElement("input"));
				var cols3 = newrow.insertCell(2);
				cols3.appendChild(document.createElement("input"));
				var cols4 = newrow.insertCell(3);
				cols4.innerHTML = "<input onclick='updarow(this)' type='button' value='确定'/>";
				var cols5 = newrow.insertCell(4);
				cols5.innerHTML = "<input onclick='delerow(this)' type='button' value='删除'/>";
			}

			function updarow(y) {
				var colupda = y.parentNode;
				var row = colupda.parentNode;

				var colname = row.children[0];
				var colnum = row.children[1];
				var colprice = row.children[2];
				if(y.value == "修改") {
					y.value = "确定";

					var newcolname = document.createElement("input");
					newcolname.value = colname.innerText;
					colname.innerHTML="";
					colname.appendChild(newcolname);

					var newcolnum = document.createElement("input");
					newcolnum.value=colnum.innerText;
					colnum.innerHTML="";
					colnum.appendChild(newcolnum);

					var newcolprice = document.createElement("input");
					newcolprice.value=colprice.innerText;
					colprice.innerHTML="";
					colprice.appendChild(newcolprice);

				} else {
					y.value = "修改";
					colname.innerHTML = colname.children[0].value;
					colnum.innerHTML = colnum.children[0].value;
					colprice.innerHTML = colprice.children[0].value;

				}

			}
		</script>
	</head>

	<body>
		<div>
			<form>
				<table border="" cellspacing="" cellpadding="" id="tab">
					<tr>
						<th style="width: 150px;">商品名称</th>
						<th style="width: 150px;">数量</th>
						<th style="width: 150px;">价格</th>
						<th colspan="2">操作</th>
					</tr>
				</table>
				<input onclick="addrow()" type="button" value="增加订单" />
			</form>
		</div>
	</body>

</html>